<template>
  <div style="width: 95%;margin: 15px auto; border: 1px solid #CFD8DC">
    <div class="class_student">
      <div style="height: 45px;line-height: 45px; border-bottom: 1px solid #CFD8DC;background-color: #ECEFF1">
        <div class="font" style="margin-left: 20px;">班级学员(课时剩余)</div>
      </div>
      <div style="width: 97%;margin: 20px auto;">
        <el-table :data="xkDetails">
<!--          <el-table-column width="165" label="学员编号" align="center" prop="student.studentNumber"></el-table-column>-->
          <el-table-column label="学员姓名" align="center" prop="studentName"/>
          <el-table-column label="手机号码" align="center" prop="className"/>
          <el-table-column label="剩余课时" align="center" prop="courseHour"/>
        </el-table>
        <div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getStudentHoursByClassStudentTable} from "../../../api/order/xkOrder";

export default {
  data() {
    return {
      xkDetails:[]
    }
  },
  created() {
    this.getStudentHoursByClassStudentTableData();
  },
  methods: {
    getStudentHoursByClassStudentTableData() {
      console.log('请求扣除课时学生信息')
      let classId = this.$route.query.classId;
      getStudentHoursByClassStudentTable(classId).then(res => {
        console.log(res)
        if (res.code === 200) {
          this.xkDetails = res.data;
        }
      })
    }
  }
}
</script>

<style scoped>
.tftable {

  color: #333333;
  width: 97%;
  border-width: 1px;
  border-color: #a9a9a9;
  border-collapse: collapse;
  margin: 20px auto;
}

.class_detail {
  height: 260px;
}

.header_td {
  background: white;
}

.tftable tr {
  background-color: #F0F3F5;
  width: 20px;
}

.font {
  font-weight: 1000;
}

.tftable td {
  font-size: 15px;
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #a9a9a9;
}
</style>
